<template>
	<div class="sing_top">
		<div class="updateTime">
			最近更新：{{format(updateTime)}}
		</div>
		<div class="box" v-for="(item,i) in singer" @click="toChild(item.id)">
			<span class="s_no"><span v-if="i<9">0</span>{{i+1}}</span>
			<span class="s_img"><img :src="item.picUrl"/></span>
			<span class="s_name">{{item.name}}</span>
			<div class="hot">
				<i class="iconfont icon-redupaixu iHot"></i>
				<span class="score">{{item.score}}</span>
			</div>
			
		</div>
		
		
	</div>
</template>

<!--
	cnpm i --save-dev axios
	axios http请求的插件
-->
<script>

	import axios from "axios";
	
	export default{
		created(){
			//获取vuex的状态
//			console.log(this.$store.state.playState)
			
			//this.$store.state.playState = true
			
			//出发store里的mutations中的方法  (action)
//			this.$store.commit("change",10)
			
			//保存起this的指向
			let self = this;
			//发起请求 歌手榜
			axios.get('https://netease.bluej.cn/toplist/artist?timestamp=111').then(
				function(res){
//					console.log(res.data);
					self.singer = res.data.list.artists;
					console.log("singer",self.singer);
					self.updateTime = res.data.list.updateTime;

				}
			)
		},
		methods:{
			format(time){
				//格式化时间
				var d = new Date(time);
				var year = d.getFullYear();
				var month = d.getMonth()+1;
				var dat = d.getDate();
				return year+"-"+month+"-"+dat;
			},
			toChild(id){
				this.$router.push({path:"/details",query:{id:id}});
//				this.$router.push("/details/"+id);
				this.$parent.$parent.flag=false;
				this.$store.commit("geshouId",{
						id:id
				})
			}
		},
		data(){
			return{
				singer:[],
				updateTime:""
			}
		},
		
	}
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--scoped类似"css"中的作用域，实质上是组件都会有一个自定义属性的"编号"
	scoped就是给样式的选择器增加了编号  类似h3[data-3333]
-->
<!--
	装sass
		cnpm i --save-dev sass-loader
		cnpm i --save-dev node-sass
-->

<style lang="scss" scoped>
	h3{
		font-size: 25px;
	}
	.sing_top{
		padding-top: 88px;
		padding-bottom: 60px;
	}
	.updateTime{
		color:#e6e6e6;
		padding:17px 0;
		margin: 0 15px;
		text-align: left;
		font-size: 14px;
		border-bottom: 1px solid #D43C33;
	}
	.box{	
		padding: 5px;
		margin: auto;
		text-align:left;
		position: relative;
		.s_no{
			color: #E6E6E6;
			line-height: 60px;
			vertical-align: top;
			display: inline-block;
			width: 40px;
			height: 40px;
			text-align: center;
		}
		.s_img{
			padding: 3px;
			width: 60px;
			height: 60px;
			font-size: 0;
			display:inline-block;
			img{
			width: 100%;
			height: 100%;
		}
		}
		.s_name{
			color: #E6E6E6;
			line-height: 60px;
			vertical-align: top;
			padding-left:20px;
			
		}
		.hot{
			display: inline-block;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			.iHot{
				color: #D43C33;
			}
			.score{
				color: #E6E6E6;
				font-size: 12px;
			}
		}
	}
	
</style>